<template>
  <div class="wrapper py-4 px-4">
    <div class="titleGroup mb-2">
      <label class="txt p-0 mb-1">电表</label>
      <div class="d-flex ">
        <el-select size="small" style="width: 254px;" v-model="meterId" placeholder="无电表">
          <el-option label="请选择" :value="-1"></el-option>
          <el-option v-for="(item,index) in meters" :key="index" :label="item.Addr" :value="item.Id"></el-option>
        </el-select>
        <el-button size="small w80" class="ur-btn ml-3" @click="queryMeter" :disabled="btnState">读取</el-button>
      </div>

      <div class="position-relative mt-3" v-if="meter&&meter.Model=='CAS18'">
        <el-row :gutter="0">
          <template v-for="index in 18">
            <el-col class="text-center" :span="8" style="background:rgba(9,20,84,0.4);height: 40px;line-height: 40px;margin-bottom: 40px;">{{index}}路电流
            </el-col>
          </template>
        </el-row>
        <el-row class="position-absolute " style="top:0;" :gutter="20">
          <template v-for="index in IList">
            <el-col class="text-center" :span="8" style="height: 40px;line-height: 40px;margin-top: 40px;">{{index}}
            </el-col>
          </template>
        </el-row>
      </div>

      <div class="position-relative mt-3" v-else>
        <el-row :gutter="0">
          <el-col class="text-center meterTr" :span="8" style="">A相电压(V)</el-col>
          <el-col class="text-center meterTr" :span="8" style="">B相电压(V)</el-col>
          <el-col class="text-center meterTr" :span="8" style="">C相电压(V)</el-col>
          <el-col class="text-center meterTr" :span="8" style="">A相电流(A)</el-col>
          <el-col class="text-center meterTr" :span="8" style="">B相电流(A)</el-col>
          <el-col class="text-center meterTr" :span="8" style="">C相电流(A)</el-col>
          <el-col class="text-center meterTr" :span="8" style="">A相有功功率(KW)</el-col>
          <el-col class="text-center meterTr" :span="8" style="">B相有功功率(KW)</el-col>
          <el-col class="text-center meterTr" :span="8" style="">C相有功功率(KW)</el-col>
          <el-col class="text-center meterTr" :span="8" style="">A相无功功率(%)</el-col>
          <el-col class="text-center meterTr" :span="8" style="">B相无功功率(%)</el-col>
          <el-col class="text-center meterTr" :span="8" style="">C相无功功率(%)</el-col>
          <el-col class="pl-2 meterTr text-center" :span="24" style="">正向有功总电能(KWh)</el-col>
        </el-row>
        <el-row class="position-absolute " style="top:0;" :gutter="20">
          <el-col class="text-center meterTrVal" :span="8">{{ecc485.Ua?ecc485.Ua:'--'}}</el-col>
          <el-col class="text-center meterTrVal" :span="8">{{ecc485.Ub?ecc485.Ub:'--'}}</el-col>
          <el-col class="text-center meterTrVal" :span="8">{{ecc485.Uc?ecc485.Uc:'--'}}</el-col>
          <el-col class="text-center meterTrVal" :span="8">{{ecc485.Ia?ecc485.Ia:'--'}}</el-col>
          <el-col class="text-center meterTrVal" :span="8">{{ecc485.Ib?ecc485.Ib:'--'}}</el-col>
          <el-col class="text-center meterTrVal" :span="8">{{ecc485.Ic?ecc485.Ic:'--'}}</el-col>
          <el-col class="text-center meterTrVal" :span="8">{{ecc485.Pa?ecc485.Pa:'--'}}</el-col>
          <el-col class="text-center meterTrVal" :span="8">{{ecc485.Pb?ecc485.Pb:'--'}}</el-col>
          <el-col class="text-center meterTrVal" :span="8">{{ecc485.Pc?ecc485.Pc:'--'}}</el-col>
          <el-col class="text-center meterTrVal" :span="8">{{ecc485.Qa?ecc485.Qa:'--'}}</el-col>
          <el-col class="text-center meterTrVal" :span="8">{{ecc485.Qb?ecc485.Qb:'--'}}</el-col>
          <el-col class="text-center meterTrVal" :span="8">{{ecc485.Qc?ecc485.Qc:'--'}}</el-col>
          <el-col class="text-center meterTrVal text-center" :span="24">{{ecc485.PAP_R?ecc485.PAP_R:'--'}}</el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
  import api from 'api/api'
  import {mapState} from 'vuex'

  export default {
    components: {},
    props: {
      box:{
        type:Object,
        default:{}
      }
    },
    data() {
      return {
        meter:{},
        meterId:-1,
        meters:[],
        IList:[],
        ecc485:{}
      }
    },
    watch: {
      meterId(val){
        if(val!=-1){
          this.meters.map(r=>{
            if(r.Id==val){
              this.meter=r
              this.meterId=r.Id
              // this.queryMeter()
            }
          })
        }
      },
      box:{
        handler(newValue, oldValue) {
          this.box = newValue
          this.queryyMater485()
        },
        deep: true
      }
    },
    computed: {
      ...mapState({
        btnState: state => state.user.btnState,
      })
    },
    methods: {
      queryMeter(){
        if (this.meterId == -1) {
          return this.$message.warning('无电表')
        }
        this.$store.commit('user/SET_BTN_STATE',true)
        if (this.meter.Model === 'CAS18') {
          this.LoopCollectorInfo()
        }else{
          this.ecc485RealData()
        }
      },
      ecc485RealData(){
        api.fetchSimple('/Communication/Ecc485RealData', {EccAddr: this.box.Addr, TnAddr: this.meter.Addr})
            .then(r => {
              this.ecc485 = r.CmdState == 0 ? r :this.$message.error({showClose:true,message:this.global.cmdStatus[r.CmdState]})
              this.$store.commit('user/SET_BTN_STATE',false)
            })
      },
      LoopCollectorInfo(){
        this.IList=[]
        api.fetchSimple('/Communication/LoopCollectorInfoRead',{EccAddr: this.box.Addr, TnAddr: this.meter.Addr})
            .then(r=>{
              this.$store.commit('user/SET_BTN_STATE',false)
              if(r.CmdState==0){
                this.IList=r.I
              }else{
                this.$message.error({showClose:true,message:this.global.cmdStatus[r.CmdState]})
                for(let i=0;i<18;i++){
                  this.IList.push('--')
                }
              }
            })
      },
      queryyMater485(){
        api.fetchSimple('/ViewInfo/QueryMater485', {eccAddr: this.box.Addr})
            .then(r => {
              if (r.length) {
                this.meters = r
                this.meter = r[0]
                this.meterId = r[0]['Id']
              }
            })
      }
    },
    created() {
      this.$store.commit('user/SET_BTN_STATE',false)
      for (let i = 0; i < 18; i++) {
        this.IList.push('--')
      }
      this.queryyMater485()
    },
    mounted() {}
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  .meterTr{background:rgba(9,20,84,0.4);height: 40px;line-height: 40px;margin-bottom: 40px;}
  .meterTrVal{height: 40px;line-height: 40px;margin-top: 40px;}
</style>
